<template>
  <div class="table-main">
    <el-table :data="tableData" border style="width: 100%"   empty-text="暂无数据">
      <el-table-column prop="standardName" width="500" label="标准名称" align="center" />
      <el-table-column prop="consultant" width="180" label="姓名" align="center" />
      <el-table-column prop="consultContent" label="问题" align="center" />
      <el-table-column prop="consultDate" label="日期" align="center" />
      <el-table-column prop="replyContent" width="180" label="回答" align="center">
        <template #default="{ row }">
          <el-tooltip effect="dark" :content="row.replyContent" placement="top" popper-class="custom-tooltip">
            <div class="truncate-text">{{ formatContent(row.replyContent) }}</div>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup lang="ts">
  import { ref, reactive, onMounted } from "vue";
  import { ElConfigProvider } from "element-plus";
  import zhCn from "element-plus/es/locale/lang/zh-cn";
  import axios from "axios";

    import { getServerUrl } from "@/utils/url";
  const serverUrl = getServerUrl();
  import { useRouter } from "vue-router";
  const router = useRouter();

  const tableData = ref([]);

  const formInline = reactive({
    condition: "",
  });
  const small = ref(false);

  const isContentOverflow = (content: String) => {
    return content.split("\n").length > 5;
  };
  const formatContent = (content: String) => {
    return content.split("\n").slice(0, 5).join("\n");
  };
  const initData = async () => {
    try {
      const response = await axios.get(serverUrl + "consultReply/exReplyList");
      const data = response.data.data.list.map((item: any) => ({
        ...item,
        consultDate: item.consultDate ? item.consultDate.substring(0, 10) : "",
      }));
      tableData.value = data;
    } catch (error) {
      console.error("数据加载失败:", error);
    }
  };
  onMounted(() => {
    initData();
  });
</script>
<style lang="scss" scoped>
.query-content {
  display: flex;
  justify-content: space-between;
}

.query-btn {
  min-width: 175px;
}

.pagination-content {
  margin-top: 1.43rem;
  display: flex;
  justify-content: center;
}

.icon-w {
  margin-left: 20px;
}

::v-deep .el-table__empty-text {
  color: #666;
  /* 文本颜色 */
  font-size: 16px;
  /* 文本大小 */
  margin: 40px 0;
  /* 上下间距，避免过于紧凑 */
}

.truncate-text {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.5;
}
</style>

<style >
.custom-tooltip {
  max-width: 400px;
  /* 限制最大宽度 */
  word-wrap: break-word;
  /* 允许长单词或URL换行 */
}
</style>



